<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'blogMessageBoard.jsp' starting page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link rel="stylesheet" type="text/css" href="css/footer.css">
		<link rel="stylesheet" type="text/css" href="css/blog_header.css">

		<link rel="stylesheet" type="text/css"
			href="css/blog_center_right.css">
		<link rel="stylesheet" type="text/css" href="css/blog_top_head.css">
		<link rel="stylesheet" type="text/css" href="css/pageStyleOne.css">
		<link rel="stylesheet" type="text/css" href="css/blog_album.css">
		<script type="text/javascript" src="js/parseIcon.js">
</script>
		<script type="text/javascript" src="js/jquery.js">
</script>
		<script type="text/javascript">
function showUpload() {
	$(".center_left_upload").css("display", "inline");
}
function closeUpload() {
	$(".center_left_upload").css("display", "none");
}
function addUploadBox() {
	var newUploadBox = "<div class='center_left_upload2-0'>";
	newUploadBox += "<span class='center_left_upload2-1'><span class='center_left_upload2-1-1'>";
	newUploadBox += "<input type='file' name='uploadFile' /></span> </span>";
	newUploadBox += "<span class='center_left_upload2-2'><span class='center_left_upload2-2-1'>";
	newUploadBox += "<textarea rows='3' cols='40' name='uploadDesign' style='text-align: left;'></textarea>";
	newUploadBox += "</span> </span></div>";
	$(".center_left_upload2").append(newUploadBox);
}
function showAlbumSelect() {
	var ao = document.getElementsByName("albumOkly");
	if (ao[0].checked) {
		$(".center_left_upload3-3").css("display", "inline");
		$(".center_left_upload3-4").css("display", "none");
	}
	if (ao[1].checked) {
		$(".center_left_upload3-4").css("display", "inline");
		$(".center_left_upload3-3").css("display", "none");
	}
}
</script>
	</head>

	<body onload="parseIcon()">
		<div class="tbody">
			<%@ include file="styleJsp/blog_top_head.jsp"%>
			<div class="table">
				<%@include file="styleJsp/blog_header.jsp"%>
				<div class="center">
					<div id="content">
						<div class="center_left">
							<div class="center_left_title">
								<b>相册</b>
								<a onclick="showUpload()">上传相片</a>
							</div>
							<div class="center_left_upload">
								<form action="uploadImageAction" method="post"
									enctype="multipart/form-data">
									<div class="center_left_upload1">
										<span class="center_left_upload1-1">1.选择图片<a
											onclick="closeUpload()" class="center_left_upload1-1-2"><span></span>
										</a><span class="center_left_upload1-1-1"><a
												onclick="addUploadBox()">再添一张</a> </span> </span>
										<span class="center_left_upload1-2">从电脑中选择您要上传的图片。<br />
											提示：选择一张图片后，您可以继续选择下一张图片，这样就可以一次上传多张图片了</span>
									</div>
									<!--上传框-->
									<div class="center_left_upload2">
										<div class="center_left_upload2-0">
											<span class="center_left_upload2-1"><span
												class="center_left_upload2-1-1"><input type="file"
														name="uploadFile" /> </span> </span>
											<span class="center_left_upload2-2"><span
												class="center_left_upload2-2-1"> <textarea rows="3"
														cols="40" name="uploadDesign" style="text-align: left;"></textarea>
											</span> </span>
										</div>
									</div>
									<!--相册选择按钮  -->
									<div class="center_left_upload3">
										<div class="center_left_upload3-1">
											<span>选择相册</span>
										</div>
										<div class="center_left_upload3-2">
											<span class="center_left_upload3-2-1"> <span
												class="center_left_upload3-2-1-1"><input
														checked="checked" type="radio" name="albumOkly"
														value="album_old" onclick="showAlbumSelect()" /> </span> <span
												class="center_left_upload3-2-1-2">选择已有相册</span> </span>
											<span class="center_left_upload3-2-1"> <span
												class="center_left_upload3-2-1-1"><input type="radio"
														name="albumOkly" value="album_new"
														onclick="showAlbumSelect()" /> </span> <span
												class="center_left_upload3-2-1-2">创建新相册</span> </span>

										</div>
										<!--选择已有相册框 -->
										<div class="center_left_upload3-3">
											<span class="center_left_upload3-3-1">选择相册</span>
											<span class="center_left_upload3-3-2"> <select
													name="albumId" id="albumId">
													<s:iterator value="albums">
														<option value="<s:property value='albumId'/>">
															<s:property value='albumName' />
														</option>
													</s:iterator>
												</select> </span>
										</div>
										<!--创建新相册框 -->
										<div class="center_left_upload3-4">
											<div class="center_left_upload3-4-1">
												<input type="hidden" name="userId"
													value="<s:property value='userId'/>" />
												<span class="center_left_upload3-4-1-1">相册名</span><span
													class="center_left_upload3-4-1-2"><input type="text"
														value="" name="albumName" style="text-align: left;">
												</span>
											</div>
											<div class="center_left_upload3-4-2">
												<span class="center_left_upload3-4-2-1">相册描述</span><span
													class="center_left_upload3-4-2-2"><textarea
														name="albumSign" rows="6" cols="40"
														style="text-align: left;"></textarea> </span>
											</div>
											<div class="center_left_upload3-4-3">
												<span class="center_left_upload3-4-3-1">隐私设置</span><span
													class="center_left_upload3-4-3-2"> <select
														name="albumRight">
														<option value="1">
															近好友可见
														</option>
														<option value="2">
															近主人可见
														</option>
													</select> </span>
											</div>
										</div>
									</div>
									<input type="submit" value="开始上传">
								</form>
							</div>
							<!--相册显示 -->
							<s:iterator value="albums">
								<div class="center_left_album">
									<div class="center_left_album3-1">
										<span class="center_left_album3-1-1"><a
											href="lookAlbumAction_lookAlbumDetail?albumId=<s:property value='albumId'/>&userId=<s:property value='userId'/>"><img
													src="images/album_face.gif" width="100" height="100" border="0"/>
										</a> </span>
										<span class="center_left_album3-1-2"><a
											href="lookAlbumAction_lookAlbumDetail?albumId=<s:property value='albumId'/>&userId=<s:property value='userId'/>"><s:property
													value='albumName' /> </a> </span>
										<span class="center_left_album3-1-3">(<s:property
												value='albumImages.size()' />)</span>
										<span class="center_left_album3-1-4">
										</span>
										<span class="center_left_album3-1-5"><a
											href="deleteAlbumAction_deleteUserAlbum?userId=<s:property value='userId' />&albumId=<s:property value='albumId'/>">删除此相册</a>
										</span>
									</div>
								</div>
							</s:iterator>

						</div>
					</div>
					<%@ include file="styleJsp/blog_center_right.jsp"%>
				</div>
				<%@ include file="styleJsp/footer.jsp"%>
			</div>
		</div>
	</body>
</html>
